import React, { useState } from 'react';
import { Box, Typography, List, ListItem, ListItemIcon, ListItemText, Divider, TextField, InputAdornment } from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';

// 示例插件数据
const demoPlugins = [
  {
    id: 'weather',
    name: '天气预报',
    description: '查询实时天气信息',
    icon: '☁️',
    category: '生活'
  },
  {
    id: 'calculator',
    name: '计算器',
    description: '快速计算数学表达式',
    icon: '🧮',
    category: '工具'
  },
  {
    id: 'schedule',
    name: '日程提醒',
    description: '设置和管理日程提醒',
    icon: '📅',
    category: '效率'
  },
  {
    id: 'notes',
    name: '笔记',
    description: '快速记录和保存笔记',
    icon: '📝',
    category: '效率'
  },
  {
    id: 'ai-robot',
    name: 'AI机器人',
    description: '智能对话和问答助手',
    icon: '🤖',
    category: '工具'
  },
  {
    id: 'mass-sender',
    name: '群发助手',
    description: '一键群发消息给多个联系人',
    icon: '📨',
    category: '效率'
  },
  {
    id: 'moments-helper',
    name: '朋友圈助手',
    description: '管理和优化朋友圈内容',
    icon: '🔄',
    category: '生活'
  },
];

// 插件分类
const categories = ['全部', '工具', '效率',  '生活'];

const PluginList = ({ onSelectPlugin }) => {
  const [searchText, setSearchText] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('全部');

  // 处理搜索
  const handleSearch = (e) => {
    setSearchText(e.target.value);
  };

  // 处理分类选择
  const handleCategorySelect = (category) => {
    setSelectedCategory(category);
  };

  // 过滤插件
  const filteredPlugins = demoPlugins.filter(plugin => {
    // 先按分类过滤
    const categoryMatch = selectedCategory === '全部' || plugin.category === selectedCategory;
    
    // 再按搜索文本过滤
    const searchMatch = !searchText || 
      plugin.name.toLowerCase().includes(searchText.toLowerCase()) || 
      plugin.description.toLowerCase().includes(searchText.toLowerCase());
    
    return categoryMatch && searchMatch;
  });

  return (
    <Box sx={{ height: '100%', width: '100%', bgcolor: '#f5f5f5', display: 'flex', flexDirection: 'column' }}>
      {/* 标题栏 */}
      <Box sx={{ p: 2, borderBottom: '1px solid #e0e0e0' }}>
        <Typography variant="h6" sx={{ fontWeight: 'medium' }}>插件中心</Typography>
      </Box>
      
      {/* 搜索框 */}
      <Box sx={{ p: 2, borderBottom: '1px solid #e0e0e0' }}>
        <TextField
          fullWidth
          size="small"
          placeholder="搜索插件"
          value={searchText}
          onChange={handleSearch}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <SearchIcon />
              </InputAdornment>
            ),
          }}
          sx={{ 
            '& .MuiOutlinedInput-root': {
              borderRadius: 2,
              backgroundColor: '#fff'
            }
          }}
        />
      </Box>
      
      {/* 分类选择 */}
      <Box sx={{ display: 'flex', overflowX: 'auto', p: 1, borderBottom: '1px solid #e0e0e0' }}>
        {categories.map(category => (
          <Box 
            key={category}
            onClick={() => handleCategorySelect(category)}
            sx={{
              px: 2,
              py: 1,
              mx: 0.5,
              borderRadius: 2,
              cursor: 'pointer',
              whiteSpace: 'nowrap',
              bgcolor: selectedCategory === category ? '#e3f2fd' : 'transparent',
              color: selectedCategory === category ? '#1976d2' : 'text.primary',
              '&:hover': {
                bgcolor: selectedCategory === category ? '#e3f2fd' : '#f0f0f0'
              }
            }}
          >
            {category}
          </Box>
        ))}
      </Box>
      
      {/* 插件列表 */}
      <Box sx={{ flex: 1, overflow: 'auto', p: 0 }}>
        <List sx={{ width: '100%', bgcolor: 'background.paper', p: 0 }}>
          {filteredPlugins.map((plugin, index) => (
            <React.Fragment key={plugin.id}>
              <ListItem 
                alignItems="flex-start" 
                button="true"
                onClick={() => onSelectPlugin && onSelectPlugin(plugin.id)}
                sx={{ 
                  p: 2,
                  '&:hover': {
                    bgcolor: '#f0f0f0'
                  }
                }}
              >
                <ListItemIcon sx={{ fontSize: '2rem', minWidth: 56 }}>
                  {plugin.icon}
                </ListItemIcon>
                <ListItemText
                  primary={
                    <Typography variant="subtitle1" sx={{ fontWeight: 'medium' }}>
                      {plugin.name}
                    </Typography>
                  }
                  secondary={
                    <Typography variant="body2" color="text.secondary">
                      {plugin.description}
                    </Typography>
                  }
                />
              </ListItem>
              {index < filteredPlugins.length - 1 && (
                <Divider variant="inset" component="li" />
              )}
            </React.Fragment>
          ))}
        </List>
      </Box>
    </Box>
  );
};

export default PluginList;